<script setup>
import { ref } from "vue"
import { Close } from "@element-plus/icons-vue"
import { fetchMarkerById } from '@/api/map.services'
import { editDeviceItem } from "@/api/device.services"
import { ElMessage } from "element-plus"
const show = ref(false)
const deviceForm = ref({})
const polygonOpen = ref(false)
const chatbox = ref(null)
const open = async (e) => {
    try {
        const result = await fetchMarkerById({ id: e.data_.id })
        if (result.code == 1) {
            deviceForm.value = result.data
            polygonOpen.value = false
            show.value = true
        }
    } catch (error) {
        console.log(error)
    }
}
/**
 * @description 组件移动
 * @param {Object} el
 * * @return {void}
 * */
const dragx = (el) => {
    let oDiv = chatbox.value //当前元素
    let disX = el.clientX - oDiv.offsetLeft
    let disY = el.clientY - oDiv.offsetTop
    document.onmousemove = function (e) {
        //通过事件委托，计算移动的距离
        let l = e.clientX - disX
        let t = e.clientY - disY
        if (l < 0) {
            //如果左侧的距离小于0，就让距离等于0.不能超出屏幕左侧。如果需要磁性吸附，把0改为100或者想要的数字即可
            l = 0
        } else if (
            l >
            document.documentElement.clientWidth - oDiv.offsetWidth
        ) {
            //如果左侧的距离>屏幕的宽度-元素的宽度。也就是说元素的右侧超出屏幕的右侧，就让元素的右侧在屏幕的右侧上
            l = document.documentElement.clientWidth - oDiv.offsetWidth
        }
        if (t < 0) {
            //和左右距离同理
            t = 0
        } else if (
            t >
            document.documentElement.clientHeight - oDiv.offsetHeight
        ) {
            t = document.documentElement.clientHeight - oDiv.offsetHeight
        }
        //移动当前元素
        oDiv.style.left = l + "px"
        oDiv.style.top = t + "px"
    };
    document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
    }
    // 解决有些时候,在鼠标松开的时候,元素仍然可以拖动;
    document.ondragstart = function (ev) {
        ev.preventDefault()
    }
    document.ondragend = function (ev) {
        ev.preventDefault()
    }
    return false
}
const openVideo = (data) => {

}
/**
 * @description 更新设备信息
 * * @param {Object} data
 * @returns
 * */
const updateDeviceInfo = async (data) => {
    const params = {
        id: deviceForm.value.device_id,
        coding: deviceForm.value.coding,
        dvc_installation: deviceForm.value.dvc_installation,
        install_date: deviceForm.value.install_date,
        factory: deviceForm.value.factory,
        contact: deviceForm.value.contact,
        warranty: deviceForm.value.warranty
    }
    const result = await editDeviceItem(params)
    if (result.code == 1) {
        ElMessage.success('更新设备信息成功')
    }
}
defineExpose({
    open
})
</script>
<template>
    <div :class="$style['divesbox']" v-show="show && deviceForm.type !== 9999" ref="chatbox" @mousedown="dragx($event)">
        <div :class="$style['divesbox-title']">
            <p :class="$style['marker_title']">{{ deviceForm.name }}</p>
            <el-icon :size="20" @click="show = false; deviceForm = {};" style="cursor: pointer">
                <Close />
            </el-icon>
        </div>
        <el-form label-width="80px" :class="$style['maeker-form-wrapper']">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="设备类型:">{{ deviceForm.node_name }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所在区域:">{{ deviceForm.area_name }}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="在线状态:">{{ deviceForm.is_online == 1 ? '在线' : '离线' }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备状态:">{{ deviceForm.status_name }}</el-form-item>
                </el-col>
            </el-row>
            <!-- <el-form-item label="设备米标:"
                v-if="deviceForm.template_id == 50011 && (deviceForm.node_id == 310 || deviceForm.node_id == 4)">
                {{ deviceForm.meters }}
            </el-form-item> -->
            <el-form-item label="工程编码:">
                <el-input v-model="deviceForm.coding" size="small" placeholder="工程编码" clearable />
            </el-form-item>
            <el-form-item label="安装位置:">
                <el-input v-model="deviceForm.dvc_installation" size="small" placeholder="安装位置" clearable />
            </el-form-item>
            <el-form-item label="安装时间:">
                <el-date-picker v-model="deviceForm.install_date" size="small" type="datetime"
                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="安装时间"
                    style="width: 80%" clearable />
            </el-form-item>
            <el-form-item label="维护厂家:">
                <el-input v-model="deviceForm.factory" size="small" placeholder="维护厂家" clearable />
            </el-form-item>
            <el-form-item label="联系方式:">
                <el-input v-model="deviceForm.contact" size="small" placeholder="联系方式" clearable />
            </el-form-item>
            <el-form-item label="保修周期:">
                <el-input v-model="deviceForm.warranty" size="small" placeholder="保修周期" clearable />
            </el-form-item>
        </el-form>
        <div class="mt-4 flex justify-between p-4 border-t border-gray-400 border-solid">
            <el-button type="primary" @click="updateDeviceInfo()" size="small">更新设备信息</el-button>
            <el-button type="success" @click="openVideo(deviceForm, 'real')" size="small">查看视频</el-button>
            <el-button type="success" @click="openVideo(deviceForm, 'record')" size="small">录像回放</el-button>
            <el-popover v-if="deviceForm.node_id == 25" placement="bottom-start" :width="270" trigger="click">
                <template #reference>
                    <el-button type="primary" @click="broadcastPopover = !broadcastPopover"
                        size="small">广播控制</el-button>
                </template>

                <div class="popover_header">
                    <p style="font-size: 12px">广播控制</p>
                    <el-icon @click="broadcastPopover = false" style="cursor: pointer">
                        <Close />
                    </el-icon>
                </div>
                <div class="screenBox">
                    <div class="lineBox" v-for="item in screenMarkerType" :key="item.id">
                        <span>{{ item.name }}</span>
                        <el-button type="primary" size="small" @click="handleBroadcastCommand(item.type)">
                            操作
                        </el-button>
                    </div>
                </div>
            </el-popover>

            <el-dropdown trigger="click" type="primary" @command="command" size="small" split-button
                v-if="deviceForm.command?.length > 0">
                <span>控制命令</span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="(item, index) in deviceForm.command" :key="index"
                            :command="item.cmd">{{ item.command_name }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
    <!--防区布点的点位信息-->
    <!-- <div :class="$style['divesbox']" v-if="show && deviceForm.type == 9999">
        <div :class="$style['divesbox-title']">
            <p class="marker_title">{{ deviceForm.device_name }}</p>
            <el-icon :size="20" class="el-icon--right" @click="show = false; deviceForm = {};" style="cursor: pointer">
                <Close />
            </el-icon>
        </div>
        <el-table :data="deviceForm.unit" style="width: 100%" height="300px" size="small">
            <el-table-column prop="unit_name" label="震动单元名称" align="center" />
            <el-table-column prop="meters" label="振动单元米标" align="center" />
        </el-table>
        <div class="mt-4 flex justify-between p-4 border-t border-gray-400 border-solid">
            <el-button type="primary" @click="openVideo(deviceForm)" size="small">查看视频</el-button>
        </div>
    </div> -->
</template>
<style lang="scss" scoped>
.divesboxfoot {
    width: 100%;
    height: 50px;
    background: #10295d;
}

.row-bg {
    width: 100%;
    display: flex;
    line-height: 35px;
    color: rgb(83, 88, 98);

    p {
        font-family: HarmonyOS Sans SC;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        text-align: right;
    }
}

.inlineBox {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 15px;

    .wrapDiv {
        height: 30px;
        line-height: 30px;
        color: #7A7A7A;

    }

    .wrapDiv_text {
        color: #000;
        margin-left: 10px;
    }

    .buttonBox {
        width: 100%;
        height: 20px;
        line-height: 20px;
        display: flex;

        .el-button {
            border-radius: 5px;
        }
    }
}

.popover_header {
    display: flex;
    justify-content: space-between;

    p {
        font-size: 14px;
    }
}

.screenBox {
    display: flex;
    flex-direction: column;
    margin-top: 10px;

    .lineBox {
        display: flex;
        justify-content: space-between;
        height: 32px;
    }
}
</style>
<style lang="scss" module>
.divesbox {
    width: 500px;
    background-color: #ffff;
    position: absolute;
    right: 100px;
    top: 180px;
    border-radius: 2px;
    box-shadow: var(--el-box-shadow-light);
}

.divesbox-title {
    padding: 0 15px 0 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 40px;
    align-items: center;
    background: #0562EE;
    color: #fff;
}

.maeker-form-wrapper {
    padding: 10px;

    & [class~='el-form-item'] {
        margin-bottom: 0;
    }

    & [class~='el-input'] {
        width: 80%;
    }
}

.marker_title {
    font-size: 15px;
    font-weight: bold;
    font-weight: 700;
}
</style>